<template>
    <div class="list">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in arr" :key="index" @click="$router.push({path:'/detail',query:{id:image.id}})">
                <img v-lazy="image.images[0]" style="width: 100%;"/>
            </van-swipe-item>
        </van-swipe>
        <div class="container">
            <ul>
                <li v-for="(item,i) in arr">
                    <router-link :to="{path: '/detail',query: {id: item.id}}">
                        <div class="left">
                            <div class="title">{{ item.title }}</div>
                            <div class="autor">{{ item.hint }}</div>    
                        </div>
                        <div class="right">
                            <img :src="item.images" alt="">
                        </div>
                    </router-link>
                </li>
            </ul>
            <ul>
                <li v-for="(item,i) in oldArr">
                    <router-link :to="{path: '/detail',query: {id: item.id}}">
                        <div class="left">
                            <div class="title">{{ item.title }}</div>
                            <div class="autor">{{ item.hint }}</div>    
                        </div>
                        <div class="right">
                            <img :src="item.images" alt="">
                        </div>
                    </router-link>
                </li>
            </ul>
            <div style="width: 100%;height: 60px;"></div>
        </div>
    </div>
</template>

<script>

import { newList } from '@/api/index';
import { oldList } from '@/api/index';
import bus from '@/until/bus'

export default {
    data(){
        return{
            arr:[],
            oldArr:[],
            list: [],
            scroll:0, 
            date:'',
            url:'/stories/before/'
        }
    },
    methods:{
        async getnewList(){
            await newList()
                .then(
                    content => {
                        let { stories, data } = content;
                        let newArr = stories.map(item => {
                            let obj = {}
                            obj.title=item.title;
                            obj.hint=item.hint;
                            obj.images=item.images;
                            obj.id=item.id;
                            return obj;
                        })
                        this.data=data
                        this.arr=newArr                      
                    }
                )
        },
        async getoldList(){
            await oldList()
                .then(
                    content => {
                        // console.log('--->',content);
                        let { stories, data } = content;
                        let newArr = stories.map(item => {
                            let obj = {}
                            obj.title=item.title;
                            obj.hint=item.hint;
                            obj.images=item.images;
                            obj.id=item.id;
                            return obj;
                        })
                        this.oldArr=[...this.oldArr,...newArr]
                        // console.log(this.arr);
                        
                    }
                )
        },
    },
        created(){
            this.getnewList()
        },
    mounted(){
        let sy=0
        document.addEventListener('touchstart', event=> {
            let sy = event.touches[0].pageY;
            if(sy>400){
            
            // console.log(1);
        }
        })
        
        let time =new Date();
        let nowYear=time.getFullYear()+''
        let nowMonth=time.getMonth()+1
        nowMonth=nowMonth>=10?''+nowMonth:'0'+nowMonth
        if(nowMonth=='13'){
            nowMonth='12'
        }
        let nowDay=time.getDate()-1
        nowDay=nowDay>=10?''+nowDay:'0'+nowDay
        if(nowDay=='0'){
            nowDay='30'
        }
        let nowTime=nowYear+nowMonth+nowDay
        this.url=this.url+nowTime;
        // console.log('123',this.date);
        // console.log("12345",this.url);
        
        bus.$emit('sendVal',`${this.url}`)
        this.getoldList()    
        
    },
}
</script>
<style lang="less" scoped>
.list{
    width: 100%;
    .container{
        width: 94%;
        margin: 0 auto;
        ul{
            width: 100%;
            li{
                width: 100%;
                height: 120px;
                border-bottom: 1px solid black;
                position: relative;
                .left{
                    position: absolute;
                    width: 70%;
                    left: 0;
                    top: 20px;
                    font-size: 16px;
                    .autor{
                        margin-top: 10px;
                        font-size: 14px;
                        color: #818181;
                    }
                }
                .right{
                    width: 25%;
                    position: absolute;
                    top: 20px;
                    right: 0;
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
    
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>

